<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" style="width:800px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">预测结果</h4>
      </div>
      <div class="modal-body">
      <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#a" aria-controls="a" role="tab" data-toggle="tab">预测结果</a></li>
          <li role="presentation" ><a href="#t" aria-controls="t" role="tab" data-toggle="tab">历史概率</a></li>
          <li role="presentation"><a href="#aaa" aria-controls="a" role="tab" data-toggle="tab">阻塞先验概率</a></li>     
          <li role="presentation"><a href="#b" aria-controls="b" role="tab" data-toggle="tab">拥堵先验概率</a></li>       
          <li role="presentation"><a href="#c" aria-controls="c" role="tab" data-toggle="tab">正常先验概率</a></li>    
          <li role="presentation"><a href="#d" aria-controls="d" role="tab" data-toggle="tab">畅通先验概率</a></li>    
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">

            <div role="tabpanel" class="tab-pane active" id="a">

                  
                <div id="shit" style="width:400px;height:300px;margin:0 auto;text-align:center;"></div>
                <h6>预测结果 </h6>
                 <table class="table table-striped">
                  <tr>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr>
                    <td>{{res.a}}%</td>
                    <td>{{res.b}}%</td>
                    <td>{{res.c}}%</td>
                    <td>{{res.d}}%</td>
                  </tr>   
                   
                </table>
                
          </div>

          <div role="tabpanel" class="tab-pane" id="t">
              <h6>历史路况</h6>
                 <table class="table table-striped">
                  <tr>
                    <th>路名</th>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr v-for="item in history">
                    <td>{{item.name}}</td>
                    <td>{{item.a[1]}}%</td>
                    <td>{{item.b[1]}}%</td>
                    <td>{{item.c[1]}}%</td>
                    <td>{{item.d[1]}}%</td> 
                  </tr>   
                   
                </table>
          </div>

          <div role="tabpanel" class="tab-pane" id="aaa">

              <h6>天目山路阻塞 </h6>
                 <table class="table table-striped">
                  <tr>
                    <th>路名</th>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr v-for="(index, item) in history2.a">
                    <td>{{history[index].name}}</td>
                     <td>{{(item.a*100).toFixed(2)}}%</td>
                     <td>{{(item.b*100).toFixed(2)}}%</td>
                     <td>{{(item.c*100).toFixed(2)}}%</td>
                     <td>{{(item.d*100).toFixed(2)}}%</td>
                  </tr>   
                   
                </table>
            </div>
            <div role="tabpanel" class="tab-pane" id="b">    
                <h6>天目山路拥堵 </h6>
                 <table class="table table-striped">
                  <tr>
                    <th>路名</th>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr v-for="(index, item) in history2.b">
                    <td>{{history[index].name}}</td>
                     <td>{{(item.a*100).toFixed(2)}}%</td>
                     <td>{{(item.b*100).toFixed(2)}}%</td>
                     <td>{{(item.c*100).toFixed(2)}}%</td>
                     <td>{{(item.d*100).toFixed(2)}}%</td>
                  </tr>   
              </div>
            <div role="tabpanel" class="tab-pane" id="c">     
                </table>
                <h6>天目山路正常</h6>
                 <table class="table table-striped">
                  <tr>
                    <th>路名</th>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr v-for="(index, item) in history2.c">
                    <td>{{history[index].name}}</td>
                     <td>{{(item.a*100).toFixed(2)}}%</td>
                     <td>{{(item.b*100).toFixed(2)}}%</td>
                     <td>{{(item.c*100).toFixed(2)}}%</td>
                     <td>{{(item.d*100).toFixed(2)}}%</td>
                  </tr>   
                   
                </table>
            </div>
            <div role="tabpanel" class="tab-pane" id="d">
                <h6>天目山路畅通 </h6>
                 <table class="table table-striped">
                  <tr>
                    <th>路名</th>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr v-for="(index, item) in history2.d">
                    <td>{{history[index].name}}</td>
                     <td>{{(item.a*100).toFixed(2)}}%</td>
                     <td>{{(item.b*100).toFixed(2)}}%</td>
                     <td>{{(item.c*100).toFixed(2)}}%</td>
                     <td>{{(item.d*100).toFixed(2)}}%</td>
                  </tr>   
                   
                </table>
          </div>
        </div>
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
        <button type="button" class="btn btn-primary">确 定</button>
      </div>
    </div>
  </div>
</div>